<template>
  <div class="zoneItem" @click="goDetail(item.id)">
      <div class="cover">
          <img :src="item.front_cover" alt="">
      </div>
      <div class="detail">
          <div class="title">{{item.soundstr}}</div>
          <div class="username">UP主：{{item.username}}</div>
          <div class="tag">
              <div class="play-times">{{item.view_count?item.view_count:item.view_count_formatted | count_filter}}</div>
              <div class="time-length">{{item.duration | timeFilter}}</div>
          </div>
      </div>
  </div>
</template>

<script>
import bus from "assets/playerBus"
export default {
    props:['item'],
    filters:{
        count_filter(value){
        return parseInt(value) > 9999 ? (Math.floor(parseInt(value)/1000)/10) + '万' : value
        },
        timeFilter(value){
            let m=new Date(~~value)
            return m.getMinutes()+":"+(m.getSeconds()<10?'0'+m.getSeconds():m.getSeconds())
        }
    },
    methods:{
        goDetail(id){
            bus.$emit("goDetail")
            this.$router.push({
                name:"sound",
                params:{
                soundid:id
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.zoneItem
    height .9rem
    width 100%
    position relative
    display flex
    .cover
        width .7rem
        height .7rem
        border-radius 0.04rem
        margin .1rem
        overflow hidden
        img
            width .7rem
            height .7rem
    .detail
        width calc(100% - .9rem)
        height 100%
        padding .1rem 0
        color #424242
        position relative
        .title
            font-size .16rem
            width 94%
            height .36rem
            line-height .18rem
            word-break break-all
            overflow hidden
            text-overflow ellipsis 
            display -webkit-box
            -webkit-box-orient vertical
            -webkit-line-clamp 2
        .username
            width 86%
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            font-size .12rem
            height .2rem
            line-height .2rem
            color #9e9e9e
        .tag
            height .12rem
            position absolute
            bottom .11rem
            left 0
            right 0
            display flex
        .play-times,.time-length
            font-size .12rem
            line-height .12rem
            color #9e9e9e
            margin-right .2rem
            width .66rem
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            display flex
            &:before
                content ""
                display block
                width .12rem
                height .12rem
                margin-right .04rem
                background-image url('https://static.missevan.com/assets/m/images/build/sprite-icons-thumbnails@2x.8e0a6b22.png')
                background-size .56rem .55rem
        .play-times:before
            background-position -0.44rem -0.27rem
        .time-length:before
            background-position -0.29rem -0.44rem
    &:after
        content ""
        display block
        position absolute
        right 0
        bottom 0
        left .1rem
        border-bottom 1px solid #e0e0e0
    &:last-child:after
        border-color transparent
</style>